@charset "utf-8";
@import url("reset.css");

*{line-height:150%}

 .WRAPPER{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/bk.jpg) top 50px center no-repeat}

.CONTAINER_BG{width:100%;position:relative}
#bw_top{width:100%;padding:0px 0 0px 0;background-color:#fff;border-bottom:1px solid #CCC;position:fixed;top:0;left:0;z-index:2}
.toplogo{float:left;padding-left:10px}
.w800{width:100%;max-width:1010px;margin:0 auto;background-color:#fff;display:block;clear:both}
.login{float:right;  
  background: #fffffff;
  line-height:50px;
  margin: auto;
}
.login a{color:#000}
.login a:hover{color:#F00}

/*HEADER*/
.HEADER{max-height:1300px;margin:0 auto;position:relative;padding-top:50px;}

/*BANNER*/
.BANNER_NORMAL{display:block;text-align:center;margin:0 auto}
.BANNER_MOBILE{display:none;background-color:#2695cc;}

/*NAV*/
.NAV{display:block}
.NAV>ul{max-width:1080px;width:100%;margin:0 auto;list-style-type:none;overflow:auto}
.NAV>ul>li{float:left;}
.NAV>ul>li>a{display:block;text-indent:-9999px;width:100px;height:100px}
.NAV>ul>li>a.ITEM01{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m01.png) top no-repeat}
.NAV>ul>li>a.ITEM01:hover{background: src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m01.png) bottom no-repeat}
.NAV>ul>li>a.ITEM02{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m02.png) top no-repeat}
.NAV>ul>li>a.ITEM02:hover{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m02.png) bottom no-repeat}
.NAV>ul>li>a.ITEM03{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m03.png) top no-repeat}
.NAV>ul>li>a.ITEM03:hover{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m03.png) bottom no-repeat}
.NAV>ul>li>a.ITEM04{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m04.png) top no-repeat}
.NAV>ul>li>a.ITEM04:hover{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m04.png) bottom no-repeat}
.NAV>ul>li>a.ITEM05{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m05.png) top no-repeat}
.NAV>ul>li>a.ITEM05:hover{background:src="https://cp-img.bookwalker.com.tw/event/2022/20221021_chilla_behemox/images/m05.png) bottom no-repeat}

.CONTAINER{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
}
.CONTAINER1{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
  background-color:#ffffff;
}
.CONTAINER2{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
  background-color:#000000;	
}
.CONTAINER3{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
}
.CONTAINER4{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
  background-color:#f7c204;	
}
.CONTAINER5{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
  background-color:#a051b0;	
}
.CONTAINER6{max-width:100%;width:100%;margin:0 auto;position:relative;clear:both;vertical-align : bottom;
  background-color:#db9996;	
}

.CONTAINERtop1{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#2695cc;}
.CONTAINERtop2{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#1aca37;}
.CONTAINERtop3{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#fec513;}
.CONTAINERtop4{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#ff5252;}
.CONTAINERtop5{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#ffffff;}
.CONTAINERtop6{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#c86eea;}
.CONTAINERtop7{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#ede6d6;}
.CONTAINERtop8{max-width:1050px;width:100%;margin:0 auto;position:relative;clear:both;background-color:#ffa8a8;}
.TITLE{text-align:center;font-size:24px;font-weight:bold;color:#4b3d3d;margin-bottom:0px}

/*footer*/
.FOOTER_BG{padding:20px;background-color:#FFFFFF;}
.FOOTER{display:block;max-width:850px;margin:0 auto;padding:20px 0;background-color:#FFFFFF;}
.COPYRIGHT{font-size:13px;font-weight:bold;text-align:center;letter-spacing:1px;line-height:22px;color:#252525;}

/*列表模組-------------------------------------------*/
.LIST{list-style-type:none;overflow:auto}
.LIST>li{padding:6px 0}
.LIST>li a{text-decoration:none}
.LIST li *{vertical-align:middle}
.LIST_TITLE{font-size:16px;font-weight:bold;text-align:center;color:#333;line-height:20px}

/*-------------------------------------Other-------------------------------------------*/

/*線條*/
.BORDER{border:0px solid #CCC;
-webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.7);
box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.7)}

/*間隔*/
.MARGIN_AUTO{margin:0 auto}

.MARGIN_TOP5{margin-top:5px}
.MARGIN_TOP10{margin-top:10px}
.MARGIN_TOP20{margin-top:20px}
 
.MARGIN_TOP30{margin-top:10px}
.MARGIN_TOP40{margin-top:40px}
.MARGIN_TOP60{margin-top:10px}
.MARGIN_TOP100{margin-top:100px}

.MARGIN_BOTTOM5{margin-bottom:5px}
.MARGIN_BOTTOM10{margin-bottom:10px}
.MARGIN_BOTTOM0{margin-bottom:0px}
.MARGIN_BOTTOM40{margin-bottom:10px}
.MARGIN_BOTTOM60{margin-bottom:60px}
.MARGIN_BOTTOM100{margin-bottom:100px}
.MARGIN_BOTTOM120{margin-bottom:120px}

.MARGIN_RIGHT10{margin-right:10px}
.MARGIN_RIGHT20{margin-right:20px}
.MARGIN_RIGHT30{margin-right:30px}

.MARGIN5{margin:5px}
.MARGIN10{margin:11px}

.PADDING05{padding:5px}
.PADDING10{padding:10px}
.PADDING20{padding:20px}
.PADDING40{padding:40px !important}

.PADDING05_0{padding:5px 0}
.PADDING10_0{padding:10px 0}
.PADDING20_0{padding:20px 0}
.PADDING30_0{padding:30px 0}
.PADDING40_0{padding:40px 0}

.PADDING_TOP10{padding-top:10px}
.PADDING_TOP20{padding-top:20px}
.PADDING_TOP30{padding-top:30px}
.PADDING_TOP40{padding-top:40px}
.PADDING_TOP80{padding-top:80px}
.PADDING_TOP250{padding-top:250px}

.PADDING_BOTTOM05{padding-bottom:5px}
.PADDING_BOTTOM10{padding-bottom:10px}
.PADDING_BOTTOM20{padding-bottom:20px}
.PADDING_BOTTOM40{padding-bottom:40px}
.PADDING_BOTTOM150{padding-bottom:150px}

/*文字*/
.FONT_SIZE13{font-size:13px}
.FONT_SIZE14{font-size:14px}
.FONT_SIZE15{font-size:15px;
padding:20px;
color:#000000;
}
.FONT_SIZE18{font-size:18px}
.FONT_SIZE20{font-size:20px}
.FONT_SIZE22{font-size:22px}
.FONT_SIZE24{font-size:24px}
.FONT_SIZE30{font-size:30px}
.FONT_BOLD{font-weight:bold}
.LINE_HEIGHT{line-height:24px}
.RED{color:#e94045}

/**/

.COLUMN1{list-style-type:none;margin:0 auto}
.COLUMN1>li>ul{list-style:none}
.COLUMN1>li{width:98%;padding:10px 0;padding-left:1%;padding-right:1%;display:inline-block;vertical-align:top}

.COLUMN2{list-style-type:none}
.COLUMN2>li{display:inline-block;width:47.5%;margin-left:1%;margin-right:1%;text-align:center;vertical-align:top}

.COLUMN2_2{list-style-type:none;text-align:center}
.COLUMN2_2>li{display:inline-block;width:25%;margin-left:1%;margin-right:1%;vertical-align:top}

.COLUMN4{list-style-type:none}
.COLUMN5{list-style-type:none}
.COLUMN4>li{display:inline-block;vertical-align:top;width:23.5%;padding-left:0.5%;padding-right:0.5%;text-align:center}

.COLUMN5{list-style-type:none}
.COLUMN5>li{display:inline-block;vertical-align:top;width:30.5%;padding-left:1%;padding-right:0.5%;text-align:center}

a{color:inherit;outline:none;/* for Firefox Google Chrome */behavior:expression(this.onFocus=this.blur());/* for IE */}
a:hover{opacity:0.9}
img{max-width:100%;height:auto}

/*對齊*/
.ALIGN_CENTER{text-align:center;
padding-top：0px
padding-right：15px
padding-bottom：0px
padding-left：15px}

.ALIGN_CENTER2{text-align:left}
.ALIGN_LEFT{text-align:left}
.ALIGN_RIGHT{text-align:right}
.ALIGN_MIDDLE{vertical-align:middle}
.CLEAR{clear:both}
.CONTENT{overflow:auto}

.LEFT_50{float:left;width:50%;_display:inline}
.RIGHT_50{float:right;width:50%;_display:inline}

.LEFT_30{float:left;width:30%;_display:inline}
.RIGHT_70{float:right;width:69%;_display:inline}

.LEFT_70{float:left;width:70%;_display:inline}
.RIGHT_30{float:right;width:29%;_display:inline}

.LEFT_35{float:left;width:35%;_display:inline}
.RIGHT_65{float:right;width:64%;_display:inline}

.LEFT_45{float:left;width:44%;_display:inline}
.RIGHT_55{float:right;width:55%;_display:inline}

.LEFT_55{float:left;width:55%;_display:inline}
.RIGHT_45{float:right;width:44%;_display:inline}

.LEFT_40{float:left;width:40%;_display:inline}
.RIGHT_60{float:right;width:59%;_display:inline}

.LEFT_60{float:left;width:58%;_display:inline}
.RIGHT_40{float:right;width:40%;_display:inline}

.LEFT_20{float:left;width:20%;_display:inline}
.RIGHT_80{float:right;width:78%;_display:inline}

.LEFT_80{float:left;width:78%;_display:inline}
.RIGHT_20{float:right;width:20%;_display:inline}

.LEFT_25{float:left;width:25%;_display:inline}
.RIGHT_75{float:right;width:75%;_display:inline}


/*-------------------------------------------------------------*/
/*控制裝置在寬度多少px時不顯示貨顯示何種項目*/
/*-------------------------------------------------------------*/

/* max-width: 991px  >> 991px已下不顯示,包含991 */
/* display: none !important;  >> 不要顯示! */

@media only screen and (max-width: 991px) {
  .TITLE {display: none !important; }
  .MARGIN_BOTTOM20 {display: none !important; }
  .ALIGN_CENTER2 {display: none !important; }
  body{width:100%;min-width:320px;font-family:Arial, "微軟正黑體";background-color:#f3f3f3;}
	
}

/* min-width: 992px 為992px已上不顯示,包含992 */
/* display: none !important;  >> 不要顯示! */

@media only screen and (min-width: 992px) {
  .hotBooksMore2{ display: block; width: 100%; margin: -15px auto 10px auto; position: relative; z-index: 1;}	
  .TITLEm { display: none !important;margin-bottom:10px;text-align:center;}
  .MARGIN_BOTTOM20m {display: none !important; }
  .ALIGN_CENTERm {display: none !important; }
  body{width:100%;min-width:320px;font-family:Arial, "微軟正黑體";background-color:#f3f3f3;}
}  

/*-------------------------------------------------------------*/


@media screen and (max-width:1050px){
.WRAPPER{background:none}
.HEADER{height:auto}
.BANNER_NORMAL, .NAV{display:none}
.BANNER_MOBILE{display:block}
}

@media screen and (max-width:768px){
.toplogo{text-align:center}
}

@media screen and (max-width:650px){

}

@media screen and (max-width:480px){
.COLUMN2>li{width:97%}
.COLUMN2_2>li{width:45%}
.COLUMN4>li, .LEFT_50, .RIGHT_50{width:47%}
}

.NOTICE{max-width:660px;margin:0 auto;list-style-position:outside}
.CONTAINER12{max-width:1050px;width:98%;margin:0 auto;position:relative;clear:both}
.MARGIN_BOTTOM40{margin-bottom:40px}