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

/*--header--------------------------------*/
header{ margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.headerPic{ position: absolute; top: 0; left: 0; right: 100; margin: 0 auto;}
.headerTitle{ top: 0; width: 100%;}
.headerBao{ top: 34%; left: 10%; width: 45%;}
.header1{ display: none;}
.header2{ display: none;}
.header3{ display: none;}
.header4{ display: none;}
.header5{ display: none;}
.headerGiftBao{ top: 70%; right: 45%; width: 40%;}
.bgHeaderM{ display: block;}

/*--content--------------------------------*/
.areaBox{ padding: 0px 0; background-position: top center; background-size: cover;}
.areaWidth1{ padding: 50px 0% 40px 0%;}
.areaWidth2{ padding: 0px 0% 20px 0%;}
.areaWidth3{ padding: 50px 0% 0px 0%;}
.areaWidth10{ padding: 50px 0% 0px 0%;}

/*--background--------------------------------*/
.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_02m.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_03m.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_04m.png);}
.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_05m.png);}
.areaBg10{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_10m.png);}

/* background-color: #7a8996;*/

/*--picHover picBox 滑鼠反應-----------------------------------------*/
.picBox .pic{ display:block;}
.picBox .picHover{ display:none;} /*一開始隱藏hover的圖片*/

.picBox:hover .pic{ display:none;} /*滑入後隱藏一開始的圖片*/
.picBox:hover .picHover{ display:block;} /*滑入後顯示hover的圖片*/

/*--a1--------------------------------*/
.title1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title1m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.book1{flex-wrap: wrap; justify-content: center; padding: 0px 6% 0px 6%; margin-top: 0px; border-radius: 10px; display: flex;}
.book1 li{ width: 40%; margin-bottom: 0px; display: flex;}

.book2{flex-wrap: wrap; justify-content: center; padding: 0px 6% 0px 6%; margin-top: 0px; border-radius: 10px; display: flex;}
.book2 li{ width: 40%; margin-bottom: 0px; display: flex;}

.title3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title3m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.book3{flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 0px; border-radius: 10px; display: none;}
.book3 li{ width: 25%; margin-bottom: 0px; display: none;}
.book3m{flex-wrap: wrap; justify-content: center; padding: 0px 12% 0px 12%; margin-top: 0px; border-radius: 10px; display: flex;}
.book3m li{ width: 25%; margin-bottom: 0px; display: flex;}

.more1{ width: 80%; margin: 0 auto; padding: 20px 0 0px 0px; position: relative; z-index: 1; display: block;}

.title10{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; margin-left: 0; display: block;}

/*--gameInfo1--------------------------------*/
.gameInfo1{ padding: 5% 5% 10% 10%; border-radius: 13px; font-size: 1.3rem; color: #144a94; font-weight: bold;}
.gameInfo1 li{ margin: 5px; list-style: disc;}
.gameInfo1 li a{ color: #2d4bb9; text-decoration: underline;}

/*--gameInfo2--------------------------------*/
.gameInfo2{ padding: 0% 5% 0% 10%; border-radius: 13px; font-size: 1.3rem; color: #144a94; font-weight: bold;}
.gameInfo2 li{ margin: 5px; list-style: disc;}
.gameInfo2 oi{ padding-left: 3%; font-size: 1.3rem;}
.gameInfo2 li a{ color: #2d4bb9; text-decoration: none; /* 移除下劃線 */}
.gameInfo2 li > ol > li{ list-style-type:disc;}/* list-style: none; 把ol li的樣式移除*/

@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) {
    header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_header.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.header1{ position: absolute; top: 23%; left: 13.3%; width: 21.2%; display: block;}
	.header2{ position: absolute; top: 5%; right: 12.5%; width: 50%; display: block;}
	.header3{ position: absolute; top: 71%; left: 45%; width: 37%; display: block;}
	.headerPic{ position: absolute; top:0%; left:0; right: 0%; margin: 0 auto;}	
    .headerTitle{ width: 0%; }
    .headerBao{ top: 0%; left: 0%; width: 0%;}
	.headerGiftBao,.bgHeaderM{ display: none;}
	
    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
	.areaWidth1{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px;}
	.areaWidth2{ max-width: 660px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 100px; margin-right: 135px; }
	.areaWidth3{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 0px;}
    .areaWidth10{ max-width: 850px;  margin: 0 auto; padding: 0px 0% 0px 10%; margin-top: 100px; margin-bottom: 100px;}
	
    /*--background--------------------------------*/
	.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_01.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_04.png);}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_05.png);}
    .areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_02.png);}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_03.png);}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_04.png);}
	.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_05.png);}	
	.areaBg10{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251202_rankinglist_fkh/images/bg_10.png);}	
	
	/*--a1--------------------------------*/
	.title1{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title1m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}
	
	.book1{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
    .book1 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}
	
	.book2{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 30px; display: flex;}
    .book2 li{ width: 14.2%; padding: 0px 0px 0px 0px; display: block;}	
	
	.title3{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title3m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}
	
	.book3{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 30px; margin-right: 60px;  display: flex;}
    .book3 li{ width: 14.2%; padding: 0px 0px 0px 0px; display: block;}
	.book3m{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 30px; margin-right: 60px;  display: none;}
    .book3m li{ width: 14.2%; padding: 0px 0px 0px 0px; display: none;}
	
	.bookStyle{ display: flex; gap: 10px;}/*間距固定10px,也可以設%*/
	.bookStyle li{ flex: 1;}
	.bookStyle li:nth-child(1){ flex: 3.65;}/*第一本比較大(可以是小數點,也可以整數)*/
	
	.more1{ width: 50%; padding: 50px 0px 0px 0px; margin-right: 30px; display: block;}
	
	.title10{ width: 25%; padding: 0px 0px 0px 0px; display: block; margin-left: 0;}
	
	/*--gameInfo1--------------------------------*/
	.gameInfo1{ padding: 3% 0% 1% 0%; border-radius: 10px; font-size: 1.4rem; color: #144a94; font-weight: bold;}
    .gameInfo1 li{ margin: 5px;  list-style-type:disc;}
    .gameInfo1 li a{ color: #2d4bb9; text-decoration: underline;}

	/*--gameInfo2--------------------------------*/
	.gameInfo2{ padding: 0% 0% 0% 2%; border-radius: 10px; font-size: 1.5rem; color: #614c3f; font-weight: bold;}
    .gameInfo2 li{ margin: 5px; /*list-style-type:decimal-leading-zero; 編號前面+0，如01、02、03...*/ }
    .gameInfo2 li a{ color: #2d4bb9; text-decoration: none; /* 移除下劃線 */}
	
	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .hover1 li a{ display: block; transition: 0.4s;}
    .hover1 li a:hover{ transform: scale(0.9);}/*滑入縮小*/
	
	/*--滑鼠滑入效果(變淡)--------------------------------*/
	.hover2 li a:hover img{filter:alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;}

}