@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;}/*[20240624調整]移除padding*/
.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 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;}

/*間距設定(不夠可以自己新增)[20240624調整]新增*/
.padd-m1, .listPadd-m1 > li{ padding: 1px;}
.padd-m2, .listPadd-m2 > li{ padding: 2px;}
.padd-m3, .listPadd-m3 > li{ padding: 3px;}
.padd-m4, .listPadd-m4 > li{ padding: 4px;}
.padd-m5, .listPadd-m5 > li{ padding: 5px;}
.padd-m6, .listPadd-m6 > li{ padding: 6px;}
.padd-m7, .listPadd-m7 > li{ padding: 7px;}
.padd-m8, .listPadd-m8 > li{ padding: 8px;}
.padd-m9, .listPadd-m9 > li{ padding: 9%;}
.padd-m10, .listPadd-m10 > li{ padding: 10px;}
.padd-m11, .listPadd-m11 > li{ padding: 11px;}
.padd-m12, .listPadd-m12 > li{ padding: 12px;}
.padd-m13, .listPadd-m13 > li{ padding: 13px;}
.padd-m14, .listPadd-m14 > li{ padding: 14px;}
.padd-m15, .listPadd-m15 > li{ padding: 15px;}
.padd-m16, .listPadd-m16 > li{ padding: 16px;}
.padd-m17, .listPadd-m17 > li{ padding: 17px;}
.padd-m18, .listPadd-m18 > li{ padding: 18px;}
.padd-m19, .listPadd-m19 > li{ padding: 19px;}
.padd-m20, .listPadd-m20 > li{ padding: 20px;}

.paddT-m0{ padding-top: 0;}/*手機單獨指定，上面0*/
.paddB-m0{ padding-bottom: 0;}/*手機單獨指定，下面0*/
.paddL-m0{ padding-left: 0;}/*手機單獨指定，左邊0*/
.paddR-m0{ padding-right: 0;}/*手機單獨指定，右邊0*/

/*--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; line-height: 1.3;/*設定行高間距*/ word-wrap: break-word;/*英文字折行*/ border-radius: 20px; /*text-align: justify;*//*文字左右對齊*/}/*內文*/
.notice li{ margin: 10px 30px; list-style: disc;}/*項目符號樣式*/
.notice li a{ color: #01a0e2; text-decoration: underline;}/*連結*/
.notice li a:hover{ text-decoration: none;}/*連結滑入*/
.listBox .notice li a{ display: inline;}/*[20240624調整]新增display: inline;*/

/*(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(不夠可以自己新增)*//*[20240624調整]移除padding*/
    .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;}

    /*間距設定(不夠可以自己新增)[20240624調整]新增*/
    .padd-pc1, .listPadd-pc1 > li{ padding: 1px;}
    .padd-pc2, .listPadd-pc2 > li{ padding: 2px;}
    .padd-pc3, .listPadd-pc3 > li{ padding: 3px;}
    .padd-pc4, .listPadd-pc4 > li{ padding: 4px;}
    .padd-pc5, .listPadd-pc5 > li{ padding: 5px;}
    .padd-pc6, .listPadd-pc6 > li{ padding: 6px;}
    .padd-pc7, .listPadd-pc7 > li{ padding: 7px;}
    .padd-pc8, .listPadd-pc8 > li{ padding: 8px;}
    .padd-pc9, .listPadd-pc9 > li{ padding: 9px;}
    .padd-pc10, .listPadd-pc10 > li{ padding: 10px;}
    .padd-pc11, .listPadd-pc11 > li{ padding: 11px;}
    .padd-pc12, .listPadd-pc12 > li{ padding: 12px;}
    .padd-pc13, .listPadd-pc13 > li{ padding: 13px;}
    .padd-pc14, .listPadd-pc14 > li{ padding: 14px;}
    .padd-pc15, .listPadd-pc15 > li{ padding: 15px;}
    .padd-pc16, .listPadd-pc16 > li{ padding: 16px;}
    .padd-pc17, .listPadd-pc17 > li{ padding: 17px;}
    .padd-pc18, .listPadd-pc18 > li{ padding: 18px;}
    .padd-pc19, .listPadd-pc19 > li{ padding: 19px;}
    .padd-pc20, .listPadd-pc20 > li{ padding: 20px;}

    .paddT-pc0{ padding-top: 0;}/*電腦單獨指定，上面0*/
    .paddB-pc0{ padding-bottom: 0;}/*電腦單獨指定，下面0*/
    .paddL-pc0{ padding-left: 0;}/*電腦單獨指定，左邊0*/
    .paddR-pc0{ padding-right: 0;}/*電腦單獨指定，右邊0*/

    /*--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: translateY(10px) scale(0.9);}/*滑入縮小*/
    
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) {
    /*--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%;}

    /*間距設定(不夠可以自己新增)[20240624調整]新增*/
    .padd-pad1, .listPadd-pad1 > li{ padding: 1px;}
    .padd-pad2, .listPadd-pad2 > li{ padding: 2px;}
    .padd-pad3, .listPadd-pad3 > li{ padding: 3px;}
    .padd-pad4, .listPadd-pad4 > li{ padding: 4px;}
    .padd-pad5, .listPadd-pad5 > li{ padding: 5px;}
    .padd-pad6, .listPadd-pad6 > li{ padding: 6px;}
    .padd-pad7, .listPadd-pad7 > li{ padding: 7px;}
    .padd-pad8, .listPadd-pad8 > li{ padding: 8px;}
    .padd-pad9, .listPadd-pad9 > li{ padding: 9px;}
    .padd-pad10, .listPadd-pad10 > li{ padding: 10px;}
    .padd-pad11, .listPadd-pad11 > li{ padding: 11px;}
    .padd-pad12, .listPadd-pad12 > li{ padding: 12px;}
    .padd-pad13, .listPadd-pad13 > li{ padding: 13px;}
    .padd-pad14, .listPadd-pad14 > li{ padding: 14px;}
    .padd-pad15, .listPadd-pad15 > li{ padding: 15px;}
    .padd-pad16, .listPadd-pad16 > li{ padding: 16px;}
    .padd-pad17, .listPadd-pad17 > li{ padding: 17px;}
    .padd-pad18, .listPadd-pad18 > li{ padding: 18px;}
    .padd-pad19, .listPadd-pad19 > li{ padding: 19px;}
    .padd-pad20, .listPadd-pad20 > li{ padding: 20px;}

    .paddT-pad0{ padding-top: 0;}/*電腦單獨指定，上面0*/
    .paddB-pad0{ padding-bottom: 0;}/*電腦單獨指定，下面0*/
    .paddL-pad0{ padding-left: 0;}/*電腦單獨指定，左邊0*/
    .paddR-pc0{ padding-right: 0;}/*電腦單獨指定，右邊0*/
}