@charset "utf-8";
/*--content(可使用自己原本的設定就好)--------------------------------*/
.tempBg{ padding: 40px 0; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230110_dlsiteasmr/images_20240308/bg_04.png); background-size: cover; background-position: top center; background-repeat: no-repeat;}
.tempWidth{ padding: 0 3%;}
.tempTitle{ width: 100%; margin: 0 auto;}


/*--listBox排列(模組)--------------------------------*/
.listTitle{ width: 100%; margin: 0 auto 10px auto;}
.listBox{ display: flex; flex-wrap: wrap;}
.listBox.listCenter{ justify-content: center;}/*置中設定*/

/*分區背景*/
.listBg{ padding: 1.5%; margin-bottom: 10px; border-radius: 10px; background-color: #fff;}/*純底色*/
.listBg1{ padding: 5%; background-image: url(https://cp-img.bookwalker.com.tw/event/2024/20240409_asa_cfps/images/bg_01m.png);}/*可自定*/
.listBg2{ background-color: #ff01f2;}/*可自定*/

/*基本設定ul(不夠可以自己新增)*/
.listBox li{ box-sizing: border-box; padding: 4px;}/*padding可自訂(如果切圖時已經有預留間距，就可以設0)*/
.listBox.ul-m1 > li{ width: 100%;}
.listBox.ul-m2 > li{ width: 50%;}
.listBox.ul-m3 > li{ width: 33.3%;}
.listBox.ul-m4 > li{ width: 25%;}
.listBox.ul-m5 > li{ width: 20%;}
.listBox.ul-m6 > li{ width: 16.6%;}
.listBox.ul-m7 > li{ width: 14.2%;}
.listBox.ul-m8 > li{ width: 12.5%;}
.listBox.ul-m9 > li{ width: 11.1%;}
.listBox.ul-m10 > li{ width: 10%;}
.listBox li a{ display: block;}
.listBox img{ display: block; width: 100%;}

/*個別設定li，可自定每一排li的數量(不夠可以自己新增)*/
.li-m1, .listBox > li.li-m1{ width: 100%;}
.li-m2, .listBox > li.li-m2{ width: 50%;}
.li-m3, .listBox > li.li-m3{ width: 33.3%;}
.li-m4, .listBox > li.li-m4{ width: 25%;}
.li-m5, .listBox > li.li-m5{ width: 20%;}
.li-m6, .listBox > li.li-m6{ width: 16.6%;}
.li-m7, .listBox > li.li-m7{ width: 14.2%;}
.li-m8, .listBox > li.li-m8{ width: 12.5%;}
.li-m9, .listBox > li.li-m9{ width: 11.1%;}
.li-m10, .listBox > li.li-m10{ width: 10%;}

/*排列順序(不夠可以自己新增)*/
.order-m1{ order: 1;}
.order-m2{ order: 2;}
.order-m3{ order: 3;}
.order-m4{ order: 4;}
.order-m5{ order: 5;}
.order-m6{ order: 6;}
.order-m7{ order: 7;}
.order-m8{ order: 8;}
.order-m9{ order: 9;}
.order-m10{ order: 10;}


/*--listBoxFree排列(模組)--------------------------------*/
/*不管有幾個li，電腦+手機都會全部排成一排，且會自己按照圖片的寬度去抓比例*/
.listBoxFree{ display: flex; justify-content: center; margin: 0 auto;}
.listBoxFree a{ display: block;}
.listBoxFree img{ display: block; width: 100%;}

.listBoxFree.freeM{ flex-wrap: wrap;}/*個別設定手機版要幾個一排*/


/*--notice活動說明(模組)--------------------------------*/
.noticeTitle{ font-weight: bold; margin: 0 0 10px 0; padding: 4px 15px; text-align: center; color: #000; font-size: 1.6rem;}/*大標題*/

/*(1)無項目小標題*/
.noticeBg{ padding: 5% 0% 5% 5%; background-color: #fff; border-radius: 20px;}/*背景色*/
.noticeBg .noticeTitle{ margin-left: -5%;}/*大標題*/

.notice{ font-size: 1.6rem; color: #000000; font-weight: bold; border-radius: 20px;}/*內文*/
.notice li{ margin: 10px 30px; list-style: disc;}/*項目符號樣式*/
.notice li a{ color: #01a0e2; text-decoration: underline;}/*連結*/
.notice li a:hover{ text-decoration: none;}/*連結滑入*/

/*(2)有項目小標題*/
.noticeBg2{ padding: 5% 0% 5% 5%; background-color: #fff; border-radius: 20px;}/*背景色*/
.noticeBg2 .noticeTitle{ margin-left: -5%;}/*大標題*/

.notice2{ font-size: 1.6rem; color: #000000; font-weight: bold; border-radius: 20px;}/*內文*/
.notice2 > li{ margin-right: 30px;}

.notice2 > li > ul { margin-bottom: 15px;}
.notice2 > li > ul > li{ margin: 5px 0 5px 30px; list-style-type: decimal;}/*項目符號樣式*/
.notice2 > li > ul > li a{ color: #01a0e2; text-decoration: underline;}/*連結*/
.notice2 > li > ul > li a:hover{ text-decoration: none;}/*連結滑入*/
.noticeSecTitle{ color: #ff01f2;}/*項目小標題*/



/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--content(可使用自己原本的設定就好)--------------------------------*/
    .tempBg{ background-attachment: fixed;}
    .tempWidth{ max-width: 1050px; margin: 0 auto;}
    .tempTitle{ width: 78%;} 


    /*--listBox排列(模組)--------------------------------*/
    /*基本設定ul(不夠可以自己新增)*/
    .listBox li{ padding: 6px;}/*padding可自訂(如果切圖時已經有預留間距，就可以設0)*/
    .listBox.ul-pc1 > li{ width: 100%;}
    .listBox.ul-pc2 > li{ width: 50%;}
    .listBox.ul-pc3 > li{ width: 33.3%;}
    .listBox.ul-pc4 > li{ width: 25%;}
    .listBox.ul-pc5 > li{ width: 20%;}
    .listBox.ul-pc6 > li{ width: 16.6%;}
    .listBox.ul-pc7 > li{ width: 14.2%;}
    .listBox.ul-pc8 > li{ width: 12.5%;}
    .listBox.ul-pc9 > li{ width: 11.1%;}
    .listBox.ul-pc10 > li{ width: 10%;}

    /*個別設定li，可自定每一排li的數量(不夠可以自己新增)*/
    .li-pc1, .listBox > li.li-pc1{ width: 100%;}
    .li-pc2, .listBox > li.li-pc2{ width: 50%;}
    .li-pc3, .listBox > li.li-pc3{ width: 33.3%;}
    .li-pc4, .listBox > li.li-pc4{ width: 25%;}
    .li-pc5, .listBox > li.li-pc5{ width: 20%;}
    .li-pc6, .listBox > li.li-pc6{ width: 16.6%;}
    .li-pc7, .listBox > li.li-pc7{ width: 14.2%;}
    .li-pc8, .listBox > li.li-pc8{ width: 12.5%;}
    .li-pc9, .listBox > li.li-pc9{ width: 11.1%;}
    .li-pc10, .listBox > li.li-pc10{ width: 10%;}

    /*排列順序(不夠可以自己新增)*/
    .order-pc1{ order: 1;}
    .order-pc2{ order: 2;}
    .order-pc3{ order: 3;}
    .order-pc4{ order: 4;}
    .order-pc5{ order: 5;}
    .order-pc6{ order: 6;}
    .order-pc7{ order: 7;}
    .order-pc8{ order: 8;}
    .order-pc9{ order: 9;}
    .order-pc10{ order: 10;}


    /*--listBoxFree排列(模組)--------------------------------*/
    .listBoxFree.freeM{ flex-wrap: nowrap;}/*個別設定手機版要幾個一排*/
    .listBoxFree .li-m1,.listBoxFree .li-m2, .listBoxFree .li-m3, .listBoxFree .li-m4, 
    .listBoxFree .li-m5, .listBoxFree .li-m6, .listBoxFree .li-m7, .listBoxFree .li-m8{ width: auto;}


    /*--notice活動說明(模組)--------------------------------*/
    .noticeTitle{ margin: 20px auto 10px auto; font-size: 1.6rem;}

    /*(1)無項目小標題*/
    .noticeBg{ padding: 4% 8%;}
    .noticeBg .noticeTitle{ margin-top: 0; margin-left: 0;}

    /*(2)有項目小標題*/
    .notice2 > li{ margin-right: 0;}
    .noticeBg2{ padding: 4% 8%;}
    .noticeBg2 .noticeTitle{ margin-top: 0; margin-left: 0;}
    

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

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) {
    /*--listBox排列(模組)--------------------------------*/
    /*基本設定ul(不夠可以自己新增)*/
    .listBox li{ padding: 6px;}/*padding可自訂(如果切圖時已經有預留間距，就可以設0)*/
    .listBox.ul-pad1 > li{ width: 100%;}
    .listBox.ul-pad2 > li{ width: 50%;}
    .listBox.ul-pad3 > li{ width: 33.3%;}
    .listBox.ul-pad4 > li{ width: 25%;}
    .listBox.ul-pad5 > li{ width: 20%;}
    .listBox.ul-pad6 > li{ width: 16.6%;}
    .listBox.ul-pad7 > li{ width: 14.2%;}
    .listBox.ul-pad8 > li{ width: 12.5%;}
    .listBox.ul-pad9 > li{ width: 11.1%;}
    .listBox.ul-pad10 > li{ width: 10%;}

    /*個別設定li，可自定每一排li的數量(不夠可以自己新增)*/
    .li-pad1, .listBox > li.li-pad1{ width: 100%;}
    .li-pad2, .listBox > li.li-pad2{ width: 50%;}
    .li-pad3, .listBox > li.li-pad3{ width: 33.3%;}
    .li-pad4, .listBox > li.li-pad4{ width: 25%;}
    .li-pad5, .listBox > li.li-pad5{ width: 20%;}
    .li-pad6, .listBox > li.li-pad6{ width: 16.6%;}
    .li-pad7, .listBox > li.li-pad7{ width: 14.2%;}
    .li-pad8, .listBox > li.li-pad8{ width: 12.5%;}
    .li-pad9, .listBox > li.li-pad9{ width: 11.1%;}
    .li-pad10, .listBox > li.li-pad10{ width: 10%;}
}