@charset "utf-8";
/* CSS Document */

/* 加載csshover3.htc，解決IE6沒有li:hover擬類的問題 */
* html body {
	behavior:url("css/csshover3.htc");
}

/****************************************
/*normal
****************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1.3em; font-family:Arial, Helvetica, sans-serif, "微軟正黑體", "新細明體"; font-size:13px;}
img{width:auto; height: auto; max-width: 100%; vertical-align: middle; border: 0;}

.pull-center{margin:0px auto;}
.pull-right{float:right}
.pull-left{float:left}
.hide{display:none}
.show{display:block}
.invisible{visibility:hidden}
.affix{position:fixed;}
.clearfix {display:block; clear:both; float:none; height:1px; float:none; width:100%; border:0px;}
.hr_line1{width:98%; height:1px; border-bottom:1px solid #d5d5d5;}
.hr_line2{width:98%; padding-bottom:20px; border-bottom: 1px solid #d5d5d5;}
.hr_line3{width:99%; padding-bottom:10px; border-bottom: 1px solid #afafaf;}
.hr_line4{width:98%; margin:5px 0px;line-height: 0px; border-top: #b6b6b6 solid 1px; border-bottom: #ffffff solid 1px;}
.hr_line5{width:98%; margin:5px 0px;line-height: 0px; border-top: #b6b6b6 dashed 1px; border-bottom: #ffffff dashed 1px;}
.hr_line6{width:98%; margin:5px auto;line-height: 0px; border-top: #b6b6b6 solid 1px; border-bottom: #ffffff solid 1px;}

a:focus{outline:thin dotted #333;}
a:hover, a:active{outline:0}
ul,ol {padding: 0; margin:0;}
li {list-style:none; padding:0; margin:0;}


/****************************************
/*color
****************************************/
.cred{color:#E50011}
.cblue{color:#4568B0}
.cblk{color:#5C3643}
.cfb{color:#3b5998;}

/****************************************
/*slider
****************************************/
/* Easy Slider */
#slider{width:100%;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:730px; height:350px; overflow:hidden; display:none;}	
#slider li img{width:730px;}	
/* numeric controls */	
ol#controls{position:absolute; right:20px; top:300px; margin:1em 0; padding:0; height:28px; }
ol#controls li{margin:0 10px 0 0; padding:0; float:left; list-style:none; height:18px; line-height:28px;}
ol#controls li a{float:left; height:18px; line-height:18px;	border:1px solid #ccc; background:#DAF3F8; color:#555; padding:0 5px; text-decoration:none;}
ol#controls li.current a{background:#e1d6c0; color:#555;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

#bonus_slider{width:100%;}
#bonus_slider ul, #slider li{margin:0; padding:0; list-style:none;}
#bonus_slider li{width:1040px; height:225px; overflow:hidden; display:none;}	
#bonus_slider li img{width:1050px; border:0px;}	


.Bslider_box ol#controls{position:absolute; right:20px; top:180px; margin:1em 0; padding:0; height:28px; }
.Bslider_box ol#controls li{margin:0 10px 0 0; padding:0; float:left; list-style:none; height:18px; line-height:28px;}
.Bslider_box ol#controls li a{float:left; height:18px; line-height:18px;	border:1px solid #ccc; background:#DAF3F8; color:#555; padding:0 5px; text-decoration:none;}
.Bslider_box ol#controls li.current a{background:#e1d6c0; color:#555;}
.Bslider_box ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}






/****************************************
/*offset
****************************************/
.offset05_R{margin-right: 250px;}
.offset04_R{margin-right: 200px;}
.offset03_R{margin-right: 150px;}
.offset02_R{margin-right: 100px;}
.offset01_R{margin-right: 50px;}
.offset00_R{margin-right: 15px;}

.offset12{margin-left: 980px;}
.offset11{margin-left: 900px;}
.offset10{margin-left: 820px;}
.offset09{margin-left: 740px;}
.offset08{margin-left: 660px;}
.offset07{margin-left: 580px;}
.offset06{margin-left: 500px;}
.offset05{margin-left: 420px;}
.offset04{margin-left: 340px;}
.offset03{margin-left: 260px;}
.offset02{margin-left: 180px;}
.offset01{margin-left: 100px;}


.span12 {width: 1150px;}
.span11 {width: 1050px;}
.span10 {width: 950px;}
.span9 {width: 850px;}
.span8 {width: 750px;}
.span7 {width: 660px;}
.span6 {width: 550px;}
.span5 {width: 450px;}
.span4 {width: 350px;}
.span3 {width: 250px;}
.span2 {width: 150px;}
.span1 {width: 100px;}
.span0 {width: 50px;}

/****************************************
/*adbox
****************************************/
.adbox_50{width:50px; height:auto;}
.adbox_50 img{width:50px;}
.ad_728x350{width:728px; height:350px; overflow:hidden;}
.ad_728x350 img{width:728px;}
.ad_300x250{width:300px; height:250px; overflow:hidden;}
.ad_300x250 img{width:300px;}
.adbox_360x90{width:360px; height:90px; margin-bottom:5px; overflow:hidden;}
.adbox_360x90 img{width:360px;}
.adbox_728x90{width:728px; height:90px; overflow:hidden; margin:8px auto;}
.adbox_728x90 img{width:728px;}
.adbox_300x100{width:300px; height:165px; overflow:hidden; margin:5px auto; border:1px solid #e6e6e6; }
.adbox_300x100 img{width:300px;}
.adbox_300x100 .ad_flv{padding:0px; margin:0px; display:block;}
.adbox_300x100 .ad_flv li{display:block; width:290px; height:165px; margin:0px auto; display:none;}
.adbox_336x280{width:336px; height:280px; overflow:hidden;}
.adbox_336x280 img{width:336px;}
.adbox_250x250{width:250px; height:250px; margin:0px auto; border:1px solid #c6c6c6;}
.adbox_250x250 img{width:250px; height:250px; border:0px;}
.adbox_300x180{
	width: 300px;
	height: 180px;
	overflow: hidden;
	margin: 5px auto;
	border: 1px solid #e6e6e6;
	color: #000;
}
.adbox_300x180 img{width:300px;}
.adbox_300x180 .ad_flv{padding:0px; margin:0px; display:block;}
.adbox_300x180 .ad_flv li{display:block; width:290px; height:180px; margin:0px auto; display:none;}
/****************************************
/*breadcrumb
****************************************/
.breadcrumb{padding:8px 15px;  margin:0 0 10px; list-style:none; -webkit-border-radius:4px;  -moz-border-radius:4px;  border-radius:4px;}
.breadcrumb >li{display:inline-block; text-shadow:0 1px 0 #fff; font-size:14px; *float:right;}
.breadcrumb >li >.divider{padding:0 5px; color:#ccc;}
.breadcrumb >.active{color:#999}
.breadcrumb >.fblike{position:relative; width:100px; height:21px;}

.header .breadcrumb a{text-decoration:none; color:#333; font-weight:bold;}
.header .breadcrumb a:hover{text-decoration:none; color:#666;}
.rewall_fluid .breadcrumb a{text-decoration:none; color:#333; font-weight:bold;}
.rewall_fluid .breadcrumb a:hover{text-decoration:underline; color:#666;}
.rewall_fluid .breadcrumb >li >.divider{padding:0 5px; color:#8c8c8c; font-size:15px;}


/****************************************
/*search_box
****************************************/
.search-query {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
.form-search  input.search-query{height:30px; width:300px; margin:0px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px}
/*.form-rcpsearch input.search-query{height:38px; width:200px; margin:0px 10px; border:0px; }*/
.form-rcpsearch-banner input.search-query{height:38px; width:200px; margin:0px 10px; border:0px; }
.form-rcpsearch input.search-query{height:38px; width:130px; margin:0px 10px; border:0px; }


/****************************************
/*navbar
****************************************/
.navbar{background:url(../images/bg/navbarbg.png) repeat-x;}
.navbar-inner{width:100%; min-height:45px;}
.navbar .nav {position: relative; display: block;}
.navbar .nav li{float:left; width:12.37%; height:45px; border-right:1px inset #999; }
.navbar .nav li:hover{background:url(../images/bg/navbarbg_h.png) repeat-x;}
.navbar .nav li.last{border:0px;}

[if gte IE 9]>
<style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]


/* ---------- 大小與定位 ---------- */
#menu {
	/* 選單大小 */
	width:100%;
	height:46px;
}
#menu ul {
	/* 取消ul樣式符號 */
	list-style-type:none;
	/* 重設ul邊界與留白為零 */
	margin:0;
	padding:0;
	/* 內有浮動元件時，需設overflow才會自動調整大小 */
	overflow:auto;
	background:#AF0000;
	border-radius:5px;	
	-moz-border-radius:5px;	
	-webkit-border-radius:5px;
	float:left;
}
* html #menu ul {
	/* 解決IE6不理overflow問題，直接指定高度 */
	height:46px;
}
#menu ul li {
	/* 利用float讓第一層li水平排列 */
	float:left;
	background-image:url(../images/bg/link.png);
}

#menu ul li:nth-child(1) {
	/* 利用float讓第一層li水平排列 */
	float:left;
	background-image:url(../images/bg/1.png);
}



/* 觸動第一層li時，改變背景色 */
#menu ul li:hover {
	background-image:url(../images/bg/hover.png);
	}

#menu ul li:nth-child(1) a:hover {
	/* 利用float讓第一層li水平排列 */
	float:left;
	background-image:url(../images/bg/2.png); 
}
	
#menu ul li:active {
	background-image:url(../images/bg/active.png);
	}

#menu ul li:nth-child(1) a:active {
	/* 利用float讓第一層li水平排列 */
	float:left;
	background-image:url(../images/bg/3.png); 
}	

#menu ul li:hover a {
	color:#FFF;
}


/* 解決IE6條列式餘白問題*/
* html #menu ul li {
	display:inline;
}
#menu ul li a {
	/* 將a改為區塊元件，以便指定寬高 */
	display:block;
	/* 這邊也要設float，否則IE6會以100%寬度顯示 */
	float:left;
	/* 固定高度 */
	height:37px;
	width:131px;
	padding-top:8px;
	text-align: center;
	font-size:16px;
	color:#FFF;
	font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
	text-decoration:none;
	line-height: 30px;
	text-shadow:-1px  -1px  1px  #9E1D0A ,1px 1px 1px  #ED4F28;
}
#menu ul li ul {
	/* 讓第二層ul跳脫文件流以利定位 */
	position:absolute;
	/* 固定寬度 */
	width:130px;
	/* 避免出現捲軸 */
	overflow:visibl;
	/* 讓ul與母階層li相同位置 */
	clear:left;
	margin-top: 45px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

/* 修正IE7絕對定位差異 */
*:first-child+html #menu ul li ul {
	margin-top:0;
}
/* 修正IE6絕對定位差異 */
* html #menu ul li ul {
	margin-top:0;
}
#menu ul li ul li {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none;/*float:left 第二層會水平排列*/
	text-align: center;
	width:130px;
}
#menu ul li ul li a {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none;
	width: 100%;/* 註：display、height、padding繼承第一層的設定 */
}
#menu ul li ul li ul {
	margin-top: -30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 100px;
	width: 100%;
}
/* 修正IE7絕對定位差異 */
*:first-child+html #menu ul li ul li ul {
	margin-top:-30px;
}
#menu ul li ul li ul li {
/* width、float繼承第二層，免設定 */
}
#menu ul li ul li ul li a {
/* width、float繼承第二層，免設定 */
}
/* ---------- 隱藏與顯示階層 ---------- */
#menu ul li ul {
	/* 預先隱藏第二層 */
	visibility:hidden;
}
#menu ul li:hover ul {
	/* 觸動第一層時，顯示第二層 */
	visibility:visible;
}
#menu ul li:hover ul li ul {
	/* 顯示第二層時，隱藏第三層，避免同時彈出 */
	visibility:hidden;
}
#menu ul li ul li:hover ul {
	/* 觸動第二層時，顯示第三層 */
	visibility:visible;
}
#menu ul li ul li:hover ul li ul {
	/* 顯示第三層時，隱藏第四層，避免同時彈出 */
	visibility:hidden;
}
#menu ul li ul li ul li:hover ul {
	/* 觸動第三層時，顯示第四層 */
	visibility:visible;
}



/*************************************
*pagination
*************************************/
.pagination {margin: 0px 0;}
.pagination ul {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination ul > li {display: inline;}
.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  /*background-color: #ffffff;*/
  background:url(../images/bg/pagination_n.jpg) repeat;
  border: 1px solid #dddddd;
  border-left-width: 0;
  color:#4c4c4c
}

.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background:url(../images/bg/pagination_c.jpg);
}

.pagination ul > li > a:active  {
  background:url(../images/bg/pagination_a.jpg);
  border:1px solid #a5a5a5;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #3c3c3c;
  cursor: default;
  font-weight:bold;
}

.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
  color: #999999;
  cursor: default;
  background-color: transparent;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

.pagination-centered {text-align: center; padding:15px 0px;}



/****************************************
/*上一頁下一頁 
****************************************/

.popup_news .popup_next a,.popup_news .popup_prev a
{
	background:url(../images/bg/popuprecipe.png) no-repeat;
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 86px;
	position: absolute;
	text-decoration: none;
	width: 50px;
	z-index: 1;
	font-size:15px;
}
.popup_news .popup_next a
{
	background-position: 0px -86px;
	margin: 0 0 0 1060px;
}
.popup_news .popup_prev a
{
	background-position: 0 0;
	margin: 0 0 0 -65px;
}
.popup_news .popup_next a:hover
{
	background-position: -50px -86px;
}
.popup_news .popup_prev a:hover
{
	background-position: -50px 0px;
}
.popup_news .popup_next p,.popup_news .popup_prev p
{
	background: url(../images/bg/popuprecipe.png);
	color: #0c3fa3;
	font-family: 微軟正黑體,"Courier New",Courier,monospace;
	font-size: 17px;
	font-weight: bold;
	height: 95px;
	letter-spacing: -1px;
	padding: 10px;
	width: 235px;
	line-height:1.3em;
}
.popup_news .popup_next p
{
	background-position: 0 -172px;
	margin: -120px 0 0 -163px;
}
.popup_news .popup_prev p
{
	background-position: 0 -287px;
	margin: -120px 0 0 -38px;
}
.popup_news .popup_next p .p_tarea,.popup_news .popup_prev p .p_tarea
{
	display: block;
	height: 80px;
	overflow: hidden;
}
.popup_news .popup_next p img,.popup_news .popup_prev p img
{
	float: left;
	height: 80px;
	margin-right: 5px;
	width: 80px;
}